<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			/* 选择器  抓取页面上的元素，给元素添加效果【添加一个样式】  1.元素选择器*/
			div{
				/* 边框复合属性 生成一个像素实现橙色的边框 */
				border:1px solid #ffaa00 ;
				width: 500px;
				height: 500px;
				border-color: #8f8f6b;   /* 需求  第一个div  颜色改为灰色*/
			}
			/* 需求  第二个div 边框颜色改为黑色 */
			/* id选择器 html元素中，前标记 +id=“别名”，
			          在css中，#别名 抓取元素;（只允许起一个外号）
			   class选择器  html元素中，前标记 +class=“别名1 别名2” 
			          在css中，.别名 */
			   #d2{
				   border: 5px solid #000;
				   backg round-color: #aaff7f;
				   /* 子属性 border-style【边框样式】*/
				   border-style:dotted;       /* 需求  第二个div 改为点线*/
				   border-style:double;
				   /* 子属性  border-color：边框的颜色属性*/
				   border-color: #aa55ff;
			   }
			   .d4{
				   /* border 边框属性【复合属性】，width style color*/
				   border: 10px solid #ff0000;
				   /* 子属性  用 border-width【边框的宽度】*/
				   /* 需求  第三个div为 50px*/
				   border-width: 30px;
				   /* 需求 上边框20px，颜色不变*/
				   border-top:20px dotted #f00;
				   border-top-color: #ff0;
				   
				   /* 需求 下边框宽度调整为 1px*/
				   border-bottom-width:1px;
				   /* 需求 左边框 双实线效果*/
				   border-left-style:double;
				   /* 需求 右边框 5px 虚线 绿色*/
				   border-right:5px dashed #00ff00;
			   }
			   /* 复杂形状 边框倒角 有边框或背景颜色
			   画圆 宽高与倒角一致，便是圆
			   属性值 border-radius：1个值 代表 上右 下左【顺时针】 改变
			                        2个值 代表 上下 | 右左 【顺时针】
									3个值 代表 上|右 左|下  【顺时针】
									4个值 代表 上|右|下|左
				画一个圆，有4种颜色 鼠标悬停在圆上，旋转
				  第3个div添加悬停效果——伪类选择器  追加效果 
				                       语法： 任意选择器:hover  悬停效果 功能
				*/
			   .d4{
				   border:5px solid #ff0000;
				   border-radius: 50%;
				   border-color: #f00 #aa00ff #00aa00 #ffaa00;
				   /* 添加一个属性  过渡属性  让悬停效果增加过渡时间*/
				   transition: transform 5s;
			   }
			   
			   /* 给第三个div 添加悬停效果*/
			   .d4:hover{
				   /* 效果：旋转*/
				   /* 转换属性 属性值*/
				   transform: rotate(1800deg);
				   
			   }
		</style>
	</head>
	<body>
		<!-- div 有宽无高的一个空间
		    css边框的使用，选择器-->
		<div></div>
		<div id="d2"></div>
		<div class="d3 d4"></div>
	</body>
</html>